<template>
	<div style="height: 100%;min-width:1700px;color: black">
		<a-layout style="min-width:1700px;height: 100%;">
			<a-layout-content
					style="min-width: 100%;max-width: 100%;width: 100%;position: relative;background: #ffffff !important;">
				<right-top icon="6.png" text="热点追踪">

					<div style="background-color:#00b14e;color:white;" class="addyj" @click="showWarning" v-cloak
					     v-show="ruleFlag == 1"><span style="margin-left:20px;cursor:pointer;font-size: 14px;">添加预警</span>
					</div>

					<a-tabs default-active-key="2" style="position: absolute;right: 40px;top: 22px;font-weight: 400;" size="small"
					        @change="callback">
						<a-tab-pane key="1" tab="热点总览"></a-tab-pane>
						<a-tab-pane key="2" tab="预警管理" force-render></a-tab-pane>
					</a-tabs>
				</right-top>
				<div class="right-content" v-show="change==1">
					<hotspottrackingechartThreePage></hotspottrackingechartThreePage>
				</div>
				<div class="right-content" v-show="change==2">
					<div class="main">
						<div class="one">
							<div class="one_top">
								<div style="width:85%;">
									<div style="font-size: 18px;">
										{{ title }}
									</div>
									<div class="one_bottom">
										{{ content }}
									</div>
									<div class="top-content">
										<div class="main">
											<div class="main-left">发布平台：</div>
											<div class="main-right">{{ platForm }}</div>
										</div>
										<div class="main">
											<div class="main-left">累计热度：</div>
											<div class="main-right">{{ totalHot }}</div>
										</div>
										<div class="main">
											<div class="main-left">上榜时间：</div>
											<div class="main-right">{{ createtime }}</div>
										</div>
										<div class="main">
											<div class="main-left">来自预警：</div>
											<div class="main-right">{{ taskName }}</div>
										</div>
									</div>
								</div>
								<div style="width:15%;display: flex;justify-content: center;align-items: center">
									<div
											style="padding:2px;padding-left:4px;padding-right:4px;color:white;background-color:#20B251;border-radius:5px;">
										{{ emotionalPolarity == 1 ? "正面-高兴" : emotionalPolarity == 2 ? "中性" : "负面" }}
									</div>
								</div>
							</div>
						</div>
						<div class="two">
							<div class="two_left">
								<div style="height:7%;width:100%;margin-left:10px;font-weight:600">
									<span style="padding-top:40px;border-bottom:2px solid #1375ff;font-size:15px">舆情</span>热度分析
								</div>
								<div style="height:93%;width:100%" ref="chart1"></div>

							</div>
							<div class="two_right">
								<div style="height:7%;width:100%;margin-left:10px;font-weight:600">
									<span style="padding-top:40px;">舆情</span>热度变化趋势
								</div>
								<div style="height:100%;width:100%" id="barChart"></div>
							</div>
						</div>
						<div style="width: 100%;position: relative">
							<div class="three">
								<div class="three_top" style="font-weight:600">
									<span style="padding-top:40px;border-bottom:2px solid #1375ff;font-size:15px;">热榜</span>视频
								</div>
								<div class="three_bottom">
									<div class="three-title">
										{{ title }}
									</div>
									<div class="three-right">
										<div style="cursor: pointer" @click="jumpLink">
											<img src="../../assets/images/body/tiaozhuan.png"
											     style="display: inline-block;width: 15px;height:15px" alt="">
											跳转至原链接
										</div>
									</div>
									<video
											style="object-fit:contain;height: 466px !important;background-color: #0b1026"
											:src="video.url"
											x5-video-player-fullscreen="true"
											controls="controls"
											id="myvideo"
									></video>
								</div>
							</div>
							<div class="five">
								<div class="five_top" style="font-weight:600">
									<span style="padding-top:40px;border-bottom:2px solid #1375ff;font-size:15px;">相关</span>视频列表
								</div>
								<div class="five_bottom">
									<div class="five_bottom_01">
										<div class="video" v-for="(item,index) in videoList" :key="index"
										>
											<div class="video-title">
												{{ item.title }}
											</div>
											<video
													style="object-fit:fill;height: 230px !important;width: 200px !important;background-color: #0b1026"
													:src="item.videoUrl"
													controls="controls"
													id="myvideo"
											></video>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="four" style="height:50px;margin-bottom:20px;margin-top: 20px">
							<button
									style="background-color:white;border:1px solid #e8e8e8;margin-left:800px;padding:6px;padding-left:18px;padding-right:18px"
									@click="fanhui">返回
							</button>
						</div>
					</div>
				</div>
				<a-modal v-model="visible" title="添加预警" width="650px" @ok="hideModal" ok-text="开始监测"
				         style="height:500px" :cancel-button-props="{ style: { display: 'none' } }">

					<warningAdd v-bind:parent="parent" v-bind:warningFlag="warningFlag"></warningAdd>

				</a-modal>
			</a-layout-content>
		</a-layout>
	</div>
</template>

<script>
// 新代码 start
import hotspottrackingechartThreePage from '@/views/videoHotSpot/hotspottrackingechartThreePage.vue'
//新代码 end
import left from './left/index'
import rightTop from './right/top'
import {hotList} from '@/api/HotSpotTracking/generalDetetion'
import {getIndexMiddle} from '@/api/home/home.js'
import echarts from 'echarts'
import {
	addWarning,
	getById,
	getHotListSimilarListById,
	getVideoStreamById,
	hotTrandThree
} from '@/api/HotSpotTracking/hotThreePage'
import hotspottrackingechart from '@/views/HotSpotTracking/hotspottrackingechart.vue'
import warningAdd from "@/views/HotSpotTracking/warningAdd.vue";

const columns = [
	{title: '站点', dataIndex: 'zd', align: 'center', ellipsis: true,},
	{title: '标题', dataIndex: 'bt', ellipsis: true, align: 'center'},
	{title: '发布时间', dataIndex: 'sj', ellipsis: true, align: 'center'},
];


const CubeLeft = echarts.graphic.extendShape({
	shape: {
		x: 0,
		y: 0
	},
	buildPath: function (ctx, shape) {
		const xAxisPoint = shape.xAxisPoint
		const c0 = [shape.x, shape.y]
		const c1 = [shape.x - 9, shape.y - 9]
		const c2 = [xAxisPoint[0] - 9, xAxisPoint[1] - 9]
		const c3 = [xAxisPoint[0], xAxisPoint[1]]
		ctx.moveTo(c0[0], c0[1]).lineTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).closePath()
	}
})
const CubeRight = echarts.graphic.extendShape({
	shape: {
		x: 0,
		y: 0
	},
	buildPath: function (ctx, shape) {
		const xAxisPoint = shape.xAxisPoint
		const c1 = [shape.x, shape.y]
		const c2 = [xAxisPoint[0], xAxisPoint[1]]
		const c3 = [xAxisPoint[0] + 18, xAxisPoint[1] - 9]
		const c4 = [shape.x + 18, shape.y - 9]
		ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
	}
})
const CubeTop = echarts.graphic.extendShape({
	shape: {
		x: 0,
		y: 0
	},
	buildPath: function (ctx, shape) {
		const c1 = [shape.x, shape.y]
		const c2 = [shape.x + 18, shape.y - 9]
		const c3 = [shape.x + 9, shape.y - 18]
		const c4 = [shape.x - 9, shape.y - 9]
		ctx.moveTo(c1[0], c1[1]).lineTo(c2[0], c2[1]).lineTo(c3[0], c3[1]).lineTo(c4[0], c4[1]).closePath()
	}
})
echarts.graphic.registerShape('CubeLeft', CubeLeft)
echarts.graphic.registerShape('CubeRight', CubeRight)
echarts.graphic.registerShape('CubeTop', CubeTop)
const MAX = [40, 38, 42, 50, 60, 77, 85, 60,]
const VALUE = [8, 7, 9, 12, 25, 45, 60, 40,]
export default {
	name: "generalDetection",
	components: {
		left,
		rightTop,
		Hotspottrackingechart: hotspottrackingechart,
		warningAdd: warningAdd,
		hotspottrackingechartThreePage
	},
	data() {
		return {
			ruleFlag: 1, // 判断角色是否是普通业务人员角色
			video: {
				muted: false,
				loop: false,
				preload: 'auto',
				poster: '',
				volume: 1,
				autoplay: false
			},
			loading: true,
			loadingMore: false,
			barTimeData: [],
			parent: this,
			barHotData: [],
			title: undefined,
			content: undefined,
			emotionalPolarity: undefined,
			platForm: undefined,
			totalHot: undefined,
			createtime: undefined,
			taskName: undefined,
			hotValue: 0,
			barMaxHotData: [],
			showLoadingMore: true,
			data: [],
			visible: false,
			warningFlag: undefined, //点击添加预警后 根据当前字段清空子组件数据
			change: 2,
			listData: [],
			changebuttonSelectStyle: '全部',
			middle_value: '全部',
			pagination: {
				pageSize: 10,
				showSizeChanger: true,
				total: 0,
				showQuickJumper: true,
				showTotal: total => `共 ${total} 条`,
				pageSizeOptions: ["10", "20", "50", "100"],//每页中显示的数据
			},
			actions: [
				{type: 'star-o', text: '156'},
				{type: 'like-o', text: '156'},
				{type: 'message', text: '2'},
			],
			labelCol: {span: 10},
			wrapperCol: {span: 14},
			form: {
				title: '',
				domain: '通用事件',
				classification: '全部',
				mediaType: 1,
			},
			orderBy: false,
			mediaFlag: 1,
			mediaStyle: 'background: #1677FF;color: #fff;cursor:pointer;',
			collspanMedia: true,
			total: 0,
			label: '',
			myChartBottomLine: undefined,
			myChartMediaBar: undefined,
			myChartScatter: undefined,
			myChartPie: undefined,
			chartPercentage: 0.8,
			chartFont: undefined,
			dataLevelLine1: [12, 80, 79, 27, 99, 43, 33],
			dataLevelLine2: [11, 76, 94, 23, 29, 77, 53],
			dataLevelLine3: [67, 62, 65, 35, 44, 69, 52],
			warningForm: {},//添加预警form
			dataLevelDate: [],
			changeSelectStyle: '全部',
			changeSelectStyles: '全部',
			weibomsg: [],
			similarList: [],
			rules1: {
				taskName: [
					{required: true, message: '请输入任务名称', trigger: 'blur'},
				],
				warningKeyword: [
					{required: true, message: '请输入预警关键词', trigger: 'blur'},
					{min: 2, max: 10, message: '字数在2-10个之间', trigger: 'blur'},
				],
				warningPlatform: [
					{required: true, message: '请勾选预警平台', trigger: 'blur'},
				],
				rank: [
					{required: true, message: '请选择预警形式', trigger: 'blur'},
				],
			},
			videoId: null,
			videoList: [],
			videoInfo: {},
		}
	},
	methods: {
		jumpLink() {
			window.open(this.videoInfo.url, "_blank");
			// this.$router.push({path: '/video/videoList'})
		},
		getById() {
			getById().then((res) => {
				if (res.status == 200) {
					this.videoInfo = res.data
				}
			})
		},
		getVideoStreamById(data) {
			let videoId = data ? data : this.videoId
			getVideoStreamById(videoId).then((res) => {
				const videoBlob = new Blob([res.data], {type: 'video/mp4'});
				const videoUrl = URL.createObjectURL(videoBlob);
				this.$set(this.video, 'url', videoUrl)
			})
		},
		getHotListSimilarListById() {
			getHotListSimilarListById(this.videoId).then((res) => {
				if (res.status == 200) {
					res.data.forEach((item, index) => {
						getVideoStreamById(item.id).then((res) => {
							const videoBlob = new Blob([res.data], {type: 'video/mp4'});
							const videoUrl = URL.createObjectURL(videoBlob);
							this.videoList.push({
								title: item.title,
								videoUrl
							})
						})
					})
				}
			})
		},
		// similarInfo(item) {
		//
		// 	loading();
		// 	setTimeout(() => {
		// 		hotTrandThree({esId: item.id}).then(res => {
		// 			if (res.data.timeList) {
		// 				this.barTimeData = res.data.timeList
		// 			}
		// 			this.title = res.data.hotTrackHotSearch.title
		// 			this.content = res.data.hotTrackHotSearch.content
		// 			this.hotValue = res.data.hotTrackHotSearch.hot
		// 			if (this.hotValue >= 10000) {
		// 				this.hotValue = parseFloat(this.hotValue / 10000).toFixed(0);
		// 			}
		// 			if (res.data.percent) {
		// 				this.chartPercentage = res.data.percent
		// 			}
		// 			this.chartFont = res.data.currentHour
		// 			this.emotionalPolarity = res.data.hotTrackHotSearch.emotionalPolarity
		// 			if (res.data.hotList) {
		// 				this.barHotData = res.data.hotList
		// 				for (let i = 0; i < this.barHotData.length; i++) {
		// 					let volume = this.barHotData[i] / 10000
		// 					let realVal = parseFloat(volume).toFixed(0);
		// 					this.barHotData[i] = realVal
		// 				}
		//
		// 				this.drawBar()
		// 				this.getecharts();
		// 			}
		// 		})
		//
		// 		getSimilarList({
		// 			title: item.title
		// 		}).then(res => {
		// 			this.similarList = res.data
		// 		});
		// 		closeLoading();
		// 	}, 1000)
		//
		// },

		//添加預警弹框
		showWarning() {
			this.$router.push({
				path: '/test',

			})
			// this.visible = true;
			// this.warningFlag = Math.floor(Math.random() * (100 - 1)) + 1;
		},
		totals() {
			this.$router.push({
				path: '/generalDetectionroots',

			})
		},
		fanhui() {
			if (this.$route.query.flag == 1) {
				this.$router.push({
					path: '/hotspottrackingInfoThreePage',
					query: {commandId: this.$route.query.commandId}
				})
			} else if (this.$route.query.flag == 2) {
				this.$router.push({
					path: '/hotspottrackingThreePage',
				})
			} else if (this.$route.query.flag == "领导页") {
				this.$router.push({
					path: '/index',
				})
			} else if (this.$route.query.flag == "全部页") {
				this.$router.push({
					path: '/home3_indexAll',
				})
			} else if (this.$route.query.flag == "舆情页") {
				this.$router.push({
					path: '/home1_indexOperating',
				})
			} else if (this.$route.query.flag == "网安页") {
				this.$router.push({
					path: '/home2_indexBusiness',
				})
			}

		},
		onLoadMore() {
			let weibo1 = [];
			let weibo2 = [];
			this.loadingMore = true;
			getIndexMiddle({}).then(res => {
				if (res.code == 0) {
					weibo2 = res.data.weibo.top10.weibo;
					this.weibomsg = this.weibomsg.concat(weibo2)
					console.log(this.weibomsg)
				} else {

					console.log('没有找到')
				}
			}).catch(err => {
				console.log(err)
			});
		},
		getIndexMiddle() {
			var weibo = []
			getIndexMiddle({}).then(res => {
				if (res.code == 0) {
					console.log(res.data.weibo.top10)
					this.loading = false;
					for (let k = 0; k < res.data.weibo.top10.negative.length; k++) {
						weibo.push(res.data.weibo.top10.negative[k])
					}

					weibo.push(res.data.weibo.top10.neutral[0])
					weibo.push(res.data.weibo.top10.positive[0])
					this.weibomsg = weibo
					console.log(weibo)

				} else {

					console.log('没有找到')
				}
			}).catch(err => {
				console.log(err)
			});
		},
		getecharts() {
			const chart1 = this.$refs.chart1
			if (chart1) {
				const myChart = this.$echarts.init(chart1)
				let color = ['#ff5b01', '#fead32', '#1576fe', '#8b4cfe'];
				const option1 = {
					series: [{
						name: '刻度',
						type: 'gauge',
						radius: '90%',
						min: 0,
						max: 1000,
						splitNumber: 10, //刻度数量
						startAngle: 220,
						endAngle: -40,
						axisLine: {
							show: true,
							lineStyle: {
								width: 1,
								color: [[1, 'rgba(0,0,0,0)']]
							}
						},//仪表盘轴线
						axisLabel: {
							show: false,
							color: 'black',
							distance: 10
						},//刻度标签。
						axisTick: {
							show: true,
							lineStyle: {
								color: 'black',
								width: 1
							},
							length: -5
						},//刻度样式
						splitLine: {
							show: true,
							length: -20,
							lineStyle: {
								color: '#fff'
							}
						},//分隔线样式
						detail: {
							show: false
						},
						pointer: {
							show: false
						}
					},
						{


							type: 'gauge',
							radius: '80%',
							center: ['50%', '50%'],

							splitNumber: 0, //刻度数量
							startAngle: 220,
							endAngle: -40,
							axisLine: {
								show: true,
								lineStyle: {
									width: 20,
									color: [
										[
											this.chartPercentage, new this.$echarts.graphic.LinearGradient(
												0, 0, 1, 0, [{
													offset: 0,
													color: '#fdc981'
												},
													{
														offset: 1,
														color: '#ed6a0a'
													}
												]
										)
										],
										[
											1, '#f1f2f4'
										]
									]
								}
							},
							//分隔线样式。
							splitLine: {
								show: false,
							},
							axisLabel: {
								show: false
							},
							axisTick: {
								show: false
							},
							pointer: {
								show: false
							},
							title: {
								show: true,
								offsetCenter: [0, '10%'], // x, y，单位px
								textStyle: {
									color: 'black',
									fontSize: 14
								}
							},
							//仪表盘详情，用于显示数据。
							detail: {
								show: true,
								offsetCenter: [0, '-15%'],
								color: '#ed6a0a',
								formatter: "{value}万",
								textStyle: {
									fontSize: 35,

								}
							},
							data: [{
								value: this.hotValue,
								name: "当前热度（" + this.chartFont + "）",
							}]
						}
					]
				}

				myChart.setOption(option1)
				window.addEventListener("resize", function () {
					myChart.resize()
				})
			}
			//第二个图表
			const chart2 = this.$refs.chart2
			if (chart2) {

				const myChart = this.$echarts.init(chart2)
				const option2 = {
					xAxis: {
						type: 'category',
						// boundaryGap: false,
						data: ['2021-09-20', '2021-09-21', '2021-09-22', '2021-09-23', '2021-09-24', '2021-09-25', '2021-09-26', '2021-09-27', '2021-09-28']
					},
					yAxis: {
						name: "单位（万）",
					},
					visualMap: {
						show: false,
						min: 0,
						max: 100,
						splitNumber: 20,
						inRange: {
							color: ['#5eb5e2', '#5eb5e2', '#5eb5e2'].reverse()
						},
						textStyle: {
							color: '#fff'
						}
					},
					series: [
						{
							symbolSize: 20,
							data: [
								[10.0, 8.04],
								[8.07, 6.95],
								[13.0, 7.58],
								[9.05, 8.81],
								[11.0, 8.33],
								[14.0, 7.66],
								[13.4, 6.81],
								[10.0, 6.33],
								[14.0, 8.96],
								[12.5, 6.82],
								[9.15, 7.2],
								[11.5, 7.2],
								[3.03, 4.23],
								[12.2, 7.83],
								[2.02, 4.47],
								[1.05, 3.33],
								[4.05, 4.96],
								[6.03, 7.24],
								[12.0, 6.26],
								[12.0, 8.84],
								[7.08, 5.82],
								[5.02, 5.68],
								[4.05, 4.96],
								[6.03, 7.24],
								[12.0, 6.26],
								[12.0, 8.84],
								[7.08, 5.82],
								[5.02, 5.68]
							],
							type: 'scatter'
						}
					]
				}

				myChart.setOption(option2)
				window.addEventListener("resize", function () {
					myChart.resize()
				})
			}
			//第三个图表
			const chart3 = this.$refs.chart3
			if (chart3) {

				const myChart = this.$echarts.init(chart3)
				const option3 = {
					title: {
						text: '近7天趋势',
						left: 'left',

						textStyle: {//主标题文本样式{"fontSize": 18,"fontWeight": "bolder","color": "#333"}
							//fontFamily: 'Arial, Verdana, sans...',
							fontSize: 15,
							fontStyle: 'normal',
							fontWeight: 'normal',
						},
					},
					xAxis: {
						type: 'category',
						axisLine: {
							lineStyle: {
								color: '#e8ecef',
								width: 1, //这里是为了突出显示加上的
							}
						},
						axisLabel: {
							textStyle: {
								color: 'black',//坐标值得具体的颜色

							}
						},
						data: ['2021-09-20', '2021-09-21', '2021-09-22', '2021-09-23']
					},
					yAxis: {
						type: 'value',
						name: "单位（万）",
						axisLine: {
							lineStyle: {
								color: '#e8ecef',
								width: 1, //这里是为了突出显示加上的
							}
						},
						axisLabel: {
							textStyle: {
								color: 'black',//坐标值得具体的颜色

							}
						},
						splitLine: {
							lineStyle: {
								color: '#e8ecef',
								width: 1, //这里是为了突出显示加上的
							}
						},
					},
					series: [
						{
							data: [60, 38, 65, 52, 100],
							type: 'line',
							itemStyle: {
								normal: {
									lineStyle: {  //线的颜色
										color: '#ff5b01'
									},
								},
							},
						}
					]
				}

				myChart.setOption(option3)
				window.addEventListener("resize", function () {
					myChart.resize()
				})
			}
		},
		drawBar() {
			this.myChartBar = this.$echarts.init(document.getElementById('barChart'))
			// 绘制图表
			this.myChartBar.setOption({
				backgroundColor: "white",
				grid: {
					left: 20,
					right: 40,
					bottom: 60,
					top: 50,
					containLabel: true
				},
				xAxis: {
					type: 'category',
					data: this.barTimeData,
					axisLine: {

						show: true,
						lineStyle: {
							color: '#9c9c9c'
						},
					},
					offset: 10,
					axisTick: {
						show: false,
						length: 9,
						alignWithLabel: true,
					},
					axisLabel: {
						fontSize: 14,
						rotate: 25,
					}
				},
				yAxis: {
					type: 'value',
					name: "单位（万）",
					axisLine: {
						show: true,
						lineStyle: {
							color: '#9c9c9c'
						}
					},
					axisLabel: {
						margin: 2,
						formatter: function (value, index) {
							if (value >= 10000 && value < 10000000) {
								value = value / 10000;
							} else if (value >= 10000000) {
								value = value / 10000000;
							}
							return value;
						},
					},

					splitLine: {
						show: false
					},
					axisTick: {
						show: false
					},
					/*   axisLabel: {
								 fontSize: 16
						 },*/
					boundaryGap: ['20%', '20%']
				},
				series: [{
					type: 'custom',
					renderItem: function (params, api) {
						const location = api.coord([api.value(0), api.value(1)])
						return {
							type: 'group',
							children: [{
								type: 'CubeLeft',
								shape: {
									api,
									xValue: api.value(0),
									yValue: api.value(1),
									x: location[0],
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0])
								},
								style: {
									fill: '#fad8bc'
								}
							}, {
								type: 'CubeRight',
								shape: {
									api,
									xValue: api.value(0),
									yValue: api.value(1),
									x: location[0],
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0])
								},
								style: {
									fill: '#fdecd7'
								}
							}, {
								type: 'CubeTop',
								shape: {
									api,
									xValue: api.value(0),
									yValue: api.value(1),
									x: location[0],
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0])
								},
								style: {
									fill: '#fdecd7'
								}
							}]
						}
					},
					data: this.barHotData
				}, {
					type: 'custom',
					renderItem: (params, api) => {
						const location = api.coord([api.value(0), api.value(1)])
						return {
							type: 'group',
							children: [{
								type: 'CubeLeft',
								shape: {
									api,
									xValue: api.value(0),
									yValue: api.value(1),
									x: location[0],
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0])
								},
								style: {
									fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: '#ee7b28'
									},
										{
											offset: 1,
											color: '#f59c4a'
										}
									])
								}
							}, {
								type: 'CubeRight',
								shape: {
									api,
									xValue: api.value(0),
									yValue: api.value(1),
									x: location[0],
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0])
								},
								style: {
									fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: '#ee7b28'
									},
										{
											offset: 1,
											color: '#f59c4a'
										}
									])
								}
							}, {
								type: 'CubeTop',
								shape: {
									api,
									xValue: api.value(0),
									yValue: api.value(1),
									x: location[0],
									y: location[1],
									xAxisPoint: api.coord([api.value(0), 0])
								},
								style: {
									fill: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
										offset: 0,
										color: '#ee7b28'
									},
										{
											offset: 1,
											color: '#f59c4a'
										}
									])
								}
							}]
						}
					},
					data: this.barHotData
				}, {
					type: 'bar',
					label: {
						normal: {
							show: true,
							position: 'top',
							formatter: (e) => {
								switch (e.name) {
									case '10kV线路':
										return VALUE[0]
									case '公用配变':
										return VALUE[1]
									case '35kV主变':
										return VALUE[2]
									case '水':

								}
							},
							fontSize: 16,
							color: '#9b9b9b',
							offset: [4, -25]
						}
					},
					itemStyle: {
						color: 'transparent'
					},
					data: this.barHotData
				}]
			});
		},
		changeStyle(value) {
			if (value == 1) {
				this.changeSelectStyle = '全部'
			}
			if (value == 2) {
				this.changeSelectStyle = '微博热搜'
			}
			if (value == 3) {
				this.changeSelectStyle = '百度热搜'
			}
			if (value == 4) {
				this.changeSelectStyle = '今日头条'
			}
		},
		changeStyles(value) {
			if (value == 1) {
				this.changeSelectStyles = '全部'
			}
			if (value == 2) {
				this.changeSelectStyles = '社会'
			}
			if (value == 3) {
				this.changeSelectStyles = '互联网'
			}
			if (value == 4) {
				this.changeSelectStyles = '娱乐'
			}
			if (value == 5) {
				this.changeSelectStyles = '国际'
			}
			if (value == 6) {
				this.changeSelectStyles = '财经'
			}
			if (value == 7) {
				this.changeSelectStyles = '游戏'
			}
		},

		//标签弹框
		showLabel() {
			this.visible = true;
		},
		hideModal(checkedValues) {
			if (this.warningForm.taskName == '' || this.warningForm.taskName == null || this.warningForm.taskName == undefined) {
				this.$message.error('请输入任务名称');
				return;
			}
			if (this.warningForm.warningKeyword == '' || this.warningForm.warningKeyword == null || this.warningForm.warningKeyword == undefined) {
				this.$message.error('请输入添加预警关键词');
				return;
			}
			if (this.warningForm.warningPlatform == '' || this.warningForm.warningPlatform == null || this.warningForm.warningPlatform == undefined) {
				this.$message.error('请输入添加预警平台');
				return;
			}
			if (this.warningForm.rank == '' || this.warningForm.rank == null || this.warningForm.rank == undefined) {
				this.$message.error('请输入添加预警形式');
				return;
			}
			if (this.warningForm.startTime == '' || this.warningForm.startTime == null || this.warningForm.startTime == undefined) {
				this.$message.error('请输入预警起始时间');
				return;
			}
			if (this.warningForm.endTime == '' || this.warningForm.endTime == null || this.warningForm.endTime == undefined) {
				this.$message.error('请输入预警结束时间')
				return;
			}
			let start = new Date(this.warningForm.startTime)
			let end = new Date(this.warningForm.endTime)
			if (start.getTime() > end.getTime()) {
				this.$message.error('起始时间不可以大于结束时间，请重新输入！')
				return;
			}

			// 添加预警
			addWarning({
				taskName: this.warningForm.taskName,
				warningKeyword: this.warningForm.warningKeyword,
				warningPlatform: this.warningForm.warningPlatform.join(","),
				rank: this.warningForm.rank,
				startTime: this.warningForm.startTime ? this.warningForm.startTime.format('YYYY-MM-DD HH:mm:ss') : '',
				endTime: this.warningForm.endTime ? this.warningForm.endTime.format('YYYY-MM-DD HH:mm:ss') : '',
				warningPush: this.warningForm.warningPush ? 1 : 0,
				subscribe: this.warningForm.subscribe ? 1 : 0,

			}).then(res => {
				if (res.status == 200) {
					this.$message.success('规则创建成功！日志正在生成中，请等待...');
					this.searchData()
					this.warningForm = {}
					// this.parent.event_create = false;
					// this.parent.wlzp =true;
					// this.parent.treeList();
				} else {
					this.$message.error('执行失败');
				}
			});
			this.visible = false;
			this.warningFlag = Math.floor(Math.random() * (100 - 1)) + 1;
		},

		onChange(checkedValues) {
			console.log('checked = ', checkedValues);
			console.log('checked = ', checkedValues.length);

			this.label = checkedValues;
		},

		suyuan() {
			this.$router.push({
				path: '/generalDetectionroots',

			})
		},
		suyuanNews() {
			this.$router.push({
				path: '/generalDetectionNewsroots',

			})
		},
		changePageInfo() {
			this.$router.push({
				path: '/hotspottrackingInfo',
			})
		},

		/*删除*/
		deleteinfomation() {
			this.$message.success("删除成功");
		},
		/*排序*/
		sequenceInfomation() {
			this.orderBy = !this.orderBy;
			hotList({
				orderBy: this.orderBy
			}).then(res => {
				/*模拟数据变化 生成环境需要更改下面的代码*/
				if (this.orderBy) {
					this.listData = res.data.list;
				} else {
					this.listData = res.data.list.reverse();
				}
				this.pagination.total = this.listData.length;
				this.total = this.listData.length;
			})
		},
		showOtherMedia() {
			this.collspanMedia = !this.collspanMedia;
		},

		tuisong() {
			this.$message.success("推送成功");
		},
		subscribe() {
			this.$message.success("订阅成功");
		},
		collection() {
			this.$message.success("收藏成功");
		},
		callback(tag) {
			if (tag == 1) {
				this.change = 1;
			}
			if (tag == 2) {
				this.change = 2;


			}
		},


	},
	filters: {
		//取截单元,单位
		playvolume: function (arg) {
			if (arg.toString().length >= 13) {
				const volume = arg / 1000000000000
				const realVal = parseFloat(volume).toFixed(0);
				return realVal + "万亿"
			} else if (arg.toString().length >= 9) {
				const volume = arg / 100000000
				const realVal = parseFloat(volume).toFixed(0);
				return realVal + "亿"
			} else if (arg.toString().length >= 4) {
				const volume = arg / 10000
				const realVal = parseFloat(volume).toFixed(0);
				return realVal + "万"
			} else {
				return arg
			}
		},
		playvolume2: function (arg) {
			if (arg.toString().length >= 13) {
				const volume = arg / 1000000000000
				const realVal = parseFloat(volume).toFixed(3);
				return realVal
			} else if (arg.toString().length >= 9) {
				const volume = arg / 100000000
				const realVal = parseFloat(volume).toFixed(3);
				return realVal
			} else if (arg.toString().length >= 4) {
				const volume = arg / 10000
				const realVal = parseFloat(volume).toFixed(3);
				return realVal
			} else {
				return arg
			}
		},
		NumFormat: function (value) {
			if (!value) return '0'
			let format = value.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
			return format
		}
	},
	mounted() {
		this.videoId = this.$route.query.id
		this.getVideoStreamById()
		this.getHotListSimilarListById()
		this.getById()
		// getRuleId().then(res => {
		// 		// 如果角色是普通业务人员
		// 		if (res.data != "ROLE.ORDINARY.BUSINESS") {
		// 			this.ruleFlag = 1;
		// 		}
		// });
		let param = {
			id: this.$route.query.id
		}
		if (this.$route.query.flag == '领导页' || this.$route.query.flag == '全部页' || this.$route.query.flag == '舆情页' || this.$route.query.flag == '网安页') {
			param = {
				urlMd5Es: this.$route.query.id
			}
		}
		hotTrandThree(param).then(res => {
			if (res.data.timeList) {
				this.barTimeData = res.data.timeList
			}
			this.title = res.data.hotTrackHotSearch.title
			this.content = res.data.hotTrackHotSearch.content
			this.hotValue = res.data.hotTrackHotSearch.hot
			if (this.hotValue >= 10000) {
				this.hotValue = parseFloat(this.hotValue / 10000).toFixed(0);
			}
			console.log('图表的值' + this.hotValue)
			if (res.data.percent) {
				this.chartPercentage = res.data.percent
			}
			this.chartFont = res.data.currentHour
			this.emotionalPolarity = res.data.hotTrackHotSearch.emotionalPolarity
			this.platForm = res.data.hotTrackHotSearch.platform
			this.totalHot = res.data.hotTrackHotSearch.totalHot
			this.createtime = res.data.hotTrackHotSearch.createtime
			this.taskName = res.data.hotTrackHotSearch.taskName
			if (res.data.hotList) {
				this.barHotData = res.data.hotList
				for (let i = 0; i < this.barHotData.length; i++) {
					let volume = this.barHotData[i] / 10000
					let realVal = parseFloat(volume).toFixed(0);
					this.barHotData[i] = realVal
				}
				this.drawBar()
				this.getecharts();
			}
		})

		// getSimilarList({
		// 	title: this.$route.query.title
		// }).then(res => {
		// 	this.similarList = res.data
		// })
	},


}
</script>

<style scoped lang="scss">
/deep/ .ant-form-item-label {
	margin-top: -16px;
	margin-left: 55px
}

/deep/ .ant-form-item-control {
	text-align: left;
	line-height: 30px;
	margin-top: -47px;
	margin-left: 132px;
	width: 30px;
}

/deep/ .ant-progress-text {
	display: none;
}

/deep/ .ant-progress-bg {
	height: 18px
}

/deep/ .addWarning {
	margin: 0;
	padding: 0;
}

/deep/ .addWarning .ant-form-item-label {
	margin-top: 0px;
	margin-left: 0px;
}

/deep/ .addWarning .ant-form-item-control {
	text-align: unset;
	line-height: 30px;
	margin-top: 0px;
	margin-left: 0px;
	width: auto;
	padding-top: 0px;
}

.chart0 {
	height: 90%;
	width: 100%;
	border: 1px solid #eeeeee;
	margin: 10px;
	margin-right: 20px
}

.chart1 {
	height: 90%;
	width: 100%;
	border: 1px solid #eeeeee;
	margin: 10px;
	margin-right: 20px;
	display: flex;
	flex-wrap: wrap
}

.button01 {
	width: 50%;
	background-color: #e8f1ff;
	display: flex;
	justify-content: space-around;
	padding-top: 8px;
	padding-bottom: 8px
}

/deep/ .ant-list-split .ant-list-item {
	border-bottom: 1px solid #f7f7f7;
	margin-left: 20px;
	margin-right: 10px
}

/deep/ .ant-list-item-meta-title {
	margin-bottom: 4px;
	color: rgba(0, 0, 0, 0.65);
	font-size: 14px;
	line-height: 17px;
}

/deep/ .ant-list-item {
	padding: 10px 0;
}

.changeStyle {
	background-color: #2F45B0;
	padding: 2px;
	padding-left: 6px;
	padding-right: 6px;
	color: white;
	border-radius: 10%;
	font-size: 10px

}

.changeStyles {
	background-color: #1470f2;
	padding: 2px;
	padding-left: 6px;
	padding-right: 6px;
	color: white;
	border-radius: 10%;
	font-size: 10px

}

.main {
	margin-top: 10px;
	margin-bottom: 10px;
	margin-left: 40px;
	margin-right: 40px;
}

.addyj {
	margin-left: 1380px;
	margin-bottom: -20px;
	padding: 6px;
	background: url("../../assets/images/generalDetection/addChart.png") left center no-repeat;
	border-radius: 5px;
	background-position: 10px;
}

.one {
	background-color: #f7f7f7;
	display: flex;
	flex-wrap: wrap;
	/*  height:120px;*/
	height: auto;
	width: 100%;
}

.one_top {
	height: 50%;
	width: 100%;
	display: flex;
	padding-top: 20px;
	padding-left: 20px;
	padding-right: 20px;
	padding-bottom: 10px;

	.one_bottom {
		width: 100%;
		font-family: MicrosoftYaHei;
		font-size: 13px;
		font-weight: normal;
		font-stretch: normal;
		line-height: 24px;
		letter-spacing: 0px;
		color: #808080;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		padding-top: 10px;
	}

	.top-content {
		width: 100%;
		display: flex;

		.main {
			width: 25%;
			display: flex;
			font-family: MicrosoftYaHei;
			font-size: 14px;
			font-weight: normal;
			font-stretch: normal;
			line-height: 24px;
			letter-spacing: 0px;
			color: #808080;

			.main-left {
				width: 25%;
			}

			.main-right {
				width: 75%;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}
		}
	}
}

.two {
	display: flex;
	height: 380px;
	width: 100%;
	padding-top: 20px
}

.two_left {
	width: 30%;
	display: flex;
	flex-wrap: wrap;

}

.two_right {
	width: 70%;
	display: flex;
	flex-wrap: wrap;
}

.three {
	display: inline-block;
	width: 58%;
	margin-right: 2%;
}

.three_top {
	width: 100%;
	margin-left: 10px;
	margin-top: 20px
}

.four_top {
	height: 6%;
	width: 100%;
	margin-left: 10px;
	margin-top: 20px
}

.three_bottom {
	display: inline-block;
	width: 100%;
	height: 466px;
	margin-top: 10px;
	position: relative;

	.three-title {
		position: absolute;
		top: 25px;
		left: 25px;
		z-index: 1000;
		font-family: MicrosoftYaHeiLight;
		font-size: 16px;
		font-weight: bold;
		font-stretch: normal;
		letter-spacing: 2px;
		color: #ffffff;
	}

	.three-right {
		position: absolute;
		top: 25px;
		right: 25px;
		z-index: 1000;
		display: flex;
		font-family: MicrosoftYaHei;
		font-size: 13px;
		font-weight: normal;
		font-stretch: normal;
		line-height: 24px;
		letter-spacing: 0px;
		color: #ffffff;
	}
}


.five {
	height: 310px;
	display: inline-block;
	width: 40%;
	position: absolute;
	right: 0;
	top: 20px;
}

five_top {
	height: 6%;
	width: 100%;
	margin-left: 10px;
	margin-top: 20px
}

.five_bottom {
	width: 100%;
	height: 466px;

	.five_bottom_01 {
		width: 100%;
		height: 466px;
		margin-top: 10px;
		overflow-y: auto;

		.video {
			display: inline-block;
			width: 200px;
			height: 230px;
			margin-left: 20px;
			position: relative;

			.video-title {
				width: 90%;
				overflow: hidden;
				white-space: nowrap;
				text-overflow: ellipsis;
				position: absolute;
				top: 10px;
				left: 10px;
				z-index: 1000;
				font-family: MicrosoftYaHei;
				font-size: 13px;
				font-weight: normal;
				font-stretch: normal;
				line-height: 24px;
				letter-spacing: 0px;
				color: #ffffff;
			}
		}
	}

}


.b_top {
	height: 7%;
	display: flex;
	width: 100%
}

.b_bottom {
	height: 93%;
	margin-top: 25px;
	color: #969696;
	/*overflow:hidden;*/
	/*text-overflow:ellipsis;*/
	/*white-space:nowrap;*/
}

.modal-box /deep/ .ant-modal-body {
	min-height: 144px;
}

.modal-box /deep/ .ant-modal-content {
	height: 250px;
}

.right-content {
	padding-bottom: 40px;

	.ant-row {
		height: 50px;
		line-height: 50px;

		.content-left {
			text-align: right;
			font-size: 14px;
			height: 100%;
		}

		.content-right {
			float: right;
			height: 100%;
			position: relative;
			left: -30px;

			.ant-input {
				width: 480px;
				height: 40px;
				border-radius: 3px;
			}
		}
	}
}

/deep/ .ant-tabs-bar {
	border-bottom: 0px solid #e8e8e8 !important;
}

/deep/ .ant-tabs-tab {
	font-size: 15px !important;
}


/deep/ .ant-list-item-meta-avatar {
	margin-right: 0px;
}

/deep/ .buttona1 > div {
	color: black;
	font-size: 13px;
	cursor: pointer;
}

.changebuttonStyle {
	background: #1577FF;
	padding: 0 10px;
	height: 25px;
	color: #fff;
	border-radius: 5px;
	line-height: 25px;
	cursor: pointer;
}

.divtext {
	border: solid #F0F0F0 1px;
	text-align: center;
	padding-left: 1%;
	padding-right: 1%;
	margin-right: 1%;
}

.titleDiv {
	height: 40px;
	margin-top: 15px;
	display: flex;
	justify-content: space-between;
	align-items: center
}

.titleFontDiv {
	font-size: 14px;
	font-weight: bold;
	margin-left: 30px;
	display: flex
}

.fontBottomLine {
	border-bottom: 2px solid #1678FF;
	height: 25px
}

.backButton {
	height: 40px;
	width: 80px;
	align-items: center;
	line-height: 40px;
	border: 1px solid #E6E6E6;
	text-align: center;
	margin-right: 50px;
	border-radius: 10px;
	cursor: pointer;
}

@media screen and (max-device-width: 2560px) {
	#lineChart {
		width: 1213px;
	}
	#pieChart {
		width: 595px;
	}
}

@media screen and (max-device-width: 1920px) {
	#lineChart {
		width: 1213px;
	}
	#pieChart {
		width: 595px;
	}
}

.scatterLabel {
	height: 30px;
	line-height: 30px;
	padding: 0 10px;
	cursor: pointer;
}

.scatterLabelActive {
	background-color: #1777FF;
	border-radius: 6px;
	color: white;
}

::-webkit-scrollbar {
	width: 2px;
	height: 6px;
}

::-webkit-scrollbar-thumb { //滑块部分
	border-radius: 5px;
	background-color: #dddddd;
}

::-webkit-scrollbar-track { //轨道部分
	box-shadow: inset 0 0 5px #f5f5f5;
	background: #ededed;
	border-radius: 5px;

}
</style>
